<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<base href="${pageContext.request.contextPath}/"/>
	<title>分类管理</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin.css"/>
	<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
	<style>
		.action-btn {
			padding: 5px 10px;
			margin: 0 3px;
			border-radius: 3px;
			text-decoration: none;
			font-size: 13px;
		}
		.btn-edit { background-color: #17a2b8; color: white; }
		.btn-delete { background-color: #dc3545; color: white; }
		.status-active { color: #28a745; font-weight: bold; }
		.status-deleted { color: #6c757d; }
		.alert {
			padding: 10px 15px;
			margin: 10px 0;
			border-radius: 4px;
			border: 1px solid transparent;
		}
		.alert-success {
			background-color: #d4edda;
			color: #155724;
			border-color: #c3e6cb;
		}
		.alert-error {
			background-color: #f8d7da;
			color: #721c24;
			border-color: #f5c6cb;
		}
		.btn-add {
			display: inline-block;
			padding: 5px 15px;
			background-color: #28a745;
			color: white;
			text-decoration: none;
			border-radius: 3px;
			margin-left: 15px;
		}
	</style>
	<script>
		$(function() {
			// 删除确认
			$('.btn-delete').on('click', function(e) {
				if (!confirm('确定要删除此分类吗？删除后将无法恢复！')) {
					e.preventDefault();
				}
			});

			// 自动隐藏提示信息
			setTimeout(function() {
				$('.alert').fadeOut('slow');
			}, 3000);
		});
	</script>
</head>
<body>
<div class="container">
	<div id="header">
		<div class="logo">
			<img src="${pageContext.request.contextPath}/images/admin/logo.png" alt="Logo"/>
		</div>
		<p>
			<a href="${pageContext.request.contextPath}/admin/logout">退出管理</a>
			<a href="${pageContext.request.contextPath}/admin">后台首页</a>
			<span>您好 <strong>${sessionScope.loginUser.account}</strong></span>
		</p>
	</div>

	<div id="admin_left">
		<ul class="menu">
			<li><a href="${pageContext.request.contextPath}/admin/category/add">增加类别</a></li>
			<li><a href="${pageContext.request.contextPath}/admin/category/list">类别列表</a></li>
			<li><a href="${pageContext.request.contextPath}/admin/goods/add">增加商品</a></li>
			<li><a href="${pageContext.request.contextPath}/admin/goods/list">商品列表</a></li>
			<li><a href="${pageContext.request.contextPath}/admin/user/list">用户列表</a></li>
		</ul>
	</div>

	<div id="admin_right">
		<div class="content_box">
			<div class="title">
				<h2>分类列表</h2>
				<a href="${pageContext.request.contextPath}/admin/category/add" class="btn-add">新增分类</a>
			</div>

			<!-- 操作结果提示 -->
			<c:if test="${not empty success}">
				<div class="alert alert-success">${success}</div>
			</c:if>
			<c:if test="${not empty error}">
				<div class="alert alert-error">${error}</div>
			</c:if>

			<table class="list_table">
				<thead>
				<tr>
					<th width="5%">序号</th>
					<th width="25%">分类名称</th>
					<th width="25%">上级分类</th>
					<th width="15%">状态</th>
					<th width="30%">操作</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${categories}" var="category" varStatus="status">
					<tr>
						<td>${status.count}</td>
						<td>${category.name}</td>
						<td>
							<c:choose>
								<c:when test="${category.pid == 0}">无</c:when>
								<c:otherwise>
									${categoryService.getCategoryNameById(category.pid)}
								</c:otherwise>
							</c:choose>
						</td>
						<td>
							<c:choose>
								<c:when test="${category.status == 1}">
									<span class="status-active">正常</span>
								</c:when>
								<c:otherwise>
									<span class="status-deleted">已删除</span>
								</c:otherwise>
							</c:choose>
						</td>
						<td>
							<a href="${pageContext.request.contextPath}/admin/category/edit/${category.id}"
							   class="action-btn btn-edit">编辑</a>
							<a href="${pageContext.request.contextPath}/admin/category/delete/${category.id}"
							   class="action-btn btn-delete">删除</a>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
</html>